<template>
<div id="father">
    <el-select  v-model="value"  multiple  filterable  allow-create  default-first-option   placeholder="请选择文章标签">
    <el-option
      v-for="item in options"
      :key="item.value"
      :label="item.label"
      :value="item.value">
    </el-option>
  </el-select>
  <el-button type="primary" >查找</el-button>
  <div id="header" title="班级详情">
    <div>
      <span>软件工程一班</span>
      <img src="../images/bck1.png" alt="">
    </div>
    <div>
      <span>最高分数<b style="color:blue">98</b></span>
      <img src="../images/bck2.png" alt="">
    </div>
    <div>
      <span>平均成绩<b style="color:blue">85</b></span>
      <img src="../images/bck3.jpg" alt="">
    </div>
    <div>
      <span>往期对比</span>
      <img src="../images/bck2.png" alt="">
    </div>
</div>
    <div id="son">
        <div id="app1"></div>
        <div id="app2"></div>
        <div id="app3"></div>
    </div>
</div>
</template>

<style scoped>
*{
  padding: 0em;
  margin: 0em;
  box-sizing: border-box;
}
#father {
  width: 100%;
}
.el-select{
  margin: 10px;
}
.el-option{
  padding-left: 5px;
}
.el-button{
  width: 60px;
  height: 35px;
}
#app1,#app2,#app3,#app4 {
  width: 50%;
  height: 400px;
  display: inline-block;
  margin-top: 50px;
}
#app2{
  padding-top: 40px;
}
#app3,#app4 {
  height: 500px;
  width: 100%;
}
#header  {
  display: flex;
}
#header:hover {
  cursor: pointer;
}
#header div {
  flex: 1;
  height: 100px;
  background-color: #fff;
  border-radius: 10px;
  margin: 0em 10px;
  overflow: hidden;
  display: flex;
  padding: 5px;
}
#header div span,img {
  flex: 1;
  align-items: center;
  line-height: 100px;
}
img{
  width: 100%;
}
</style>

<script>

import * as echarts from 'echarts';

export default {
  name: "home",
  data() {
    return {
      options: [{
          value: '2019软工一班',
          label: '2019软工一班'
        }, {
          value: '2019电科一班',
          label: '2019电科一班'
        }, {
          value: '2019电信一班',
          label: '2019电信一班'
        }],
        value: [],
    }
  },
  mounted() {
    this.echartsInit1();
    this.echartsInit2();
    this.echartsInit3();
    },
  methods: {
    echartsInit1(){
      var chartDom = document.getElementById('app1');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: [
          {
            type: 'category',
            data: ['12月期末', '1月月考', '2月月考', '3月月考', '4月月考', '期中考试', '六月月考'],
            axisTick: {
              alignWithLabel: true
            }
          }
        ],
        yAxis: [
          {
            type: 'value'
          }
        ],
        series: [
          {
            name: '平均成绩',
            type: 'bar',
            barWidth: '60%',
            data: [66, 86, 80, 85, 90, 80, 89]
          }
        ]
      };

      option && myChart.setOption(option);
    },
    echartsInit2(){
      var chartDom = document.getElementById('app2');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '本次成绩分本',
          subtext: '分数区间',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 1048, name: '80-90' },
              { value: 735, name: '90-100' },
              { value: 580, name: '70-80' },
              { value: 484, name: '60-70' },
              { value: 300, name: '0-60' }
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };

      option && myChart.setOption(option);
    },
    echartsInit3(){
      var chartDom = document.getElementById('app3');
      var myChart = echarts.init(chartDom);
      var option;

      option = {
        title: {
          text: '班级对比'
        },
        tooltip: {
          trigger: 'axis'
        },
        legend: {
          data: ['软工一班', '计科一班', '通信一班', '电信一班', '电科一班']
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        toolbox: {
          feature: {
            saveAsImage: {}
          }
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
            data: ['12月期末', '1月月考', '2月月考', '3月月考', '4月月考', '期中考试', '六月月考'],
        },
        yAxis: {
          type: 'value'
        },
        series: [
          {
            name: '软工一班',
            type: 'line',
            data: [92, 94 ,95, 90, 85, 96, 100]
          },
          {
            name: '计科一班',
            type: 'line',
            data: [80, 66, 89, 92, 82, 86, 88]
          },
          {
            name: '通信一班',
            type: 'line',
            data: [70 ,82, 85, 86, 80, 67, 60]
          },
          {
            name: '电信一班',
            type: 'line',
            data: [75, 83, 80, 75, 86, 62, 90]
          },
          {
            name: '电科一班',
            type: 'line',
            data: [72, 66, 54, 87, 82, 89, 95]
          }
        ]
};

option && myChart.setOption(option);
    }
  }
}
</script>